<template>
	<m-layout2 title="收银台" class="surePay" barBg="unset" color="#111">
		<!-- 	<template v-if="!isOrder">
			<text @click="Jump({url:'/pages/order/orderDetails/orderDetails?isPay=true&orderNo=' + item.orderNo})"
				slot="right">订单详情</text>
		</template> -->
		<view class="main ">
			<view class="top-msg">
				<view class="h1">
					<text>实付金额</text>
				</view>
				<view class="h2 flex jc-center">
					<m-price v-if="totalPrice" :value="totalPrice" weight="600" :size="[68,48]" color="#111" />
				</view>
			</view>
		</view>
		<view class="pay-type plr-32" v-if="totalPrice">
			<view class="titles flex-between">
				<text>选择支付方式</text>
				<view class="flex fs24 text-red" @click="downpay()" v-if="item.wards==1 || item.wards==3">
					<text>线下打款支付</text>
					<m-icon size="24" color="#E8456A " type="icon-qianjin" />
				</view>
			</view>
			<payType class="pay-list" v-model="payType" :type="payList"></payType>
		</view>
		</view>
		<m-pay class="pay-popop" title="请输入支付密码" isPay :isShow="payShow" :showCancel="true" @handleConfirm="propCreat"
			@handleCancel="payShow = false">
		</m-pay>
		<view class="btn-box" slot="footer">
			<!-- <icp></icp> -->
			<view class="box">
				<m-button @click="verify" :loading="payLoading">确认支付</m-button>
			</view>
		</view>
		<uni-popup ref="copyShow" type="center" :maskClick="false">
			<view class="copy-popup flex-column">
				<view class="center flex-center"><text>请确认支付是否已完成</text></view>
				<view class="btn-box flex-between">
					<text @click="$refs.copyShow.close()">继续支付</text>
					<text
						@click="isOrder?Jump():Jump({url:'/pages/order/details/details?isPay=true&orderId=' + orderid,mode:2})">已完成支付</text>
				</view>
			</view>
		</uni-popup>
		<!-- 线下打款支付弹框 -->
		<uni-popup ref="payShow" type="bottom" :maskClick="true">
			<m-block class="payShow flex-column" bg-color="#fff" gap="030" radius="20 20 0 0">
				<m-block gap="0 0 0">
					<view class="flex ptb-20">
						<text class="fs28 fw-600">银行对公账户信息</text>
					</view>
					<view class="flex-between">
						<text class="fs24">账户名称：</text>
						<view class="fs24">
							<text>{{getConfig(708)}}</text>
							<m-copy class="ml-16" :str="getConfig(708)"></m-copy>
						</view>
					</view>
					<view class="flex-between ptb-20">
						<text class="fs24">账户号码：</text>
						<view class="fs28">
							<text>{{getConfig(709)}}</text>
							<m-copy class="ml-16" :str="getConfig(709)"></m-copy>
						</view>
					</view>
					<view class="flex-between">
						<text class="fs24">开户银行：</text>
						<view class="fs24">
							<text>{{getConfig(710)}}</text>
							<m-copy class="ml-16" :str="getConfig(710)"></m-copy>
						</view>
					</view>
				</m-block>
				<m-block gap="30 0">
					<view class="flex ptb-20">
						<text class="fs28 fw-600">公司收款码信息</text>
					</view>
					<view class="flex-between pb-20">
						<text class="fs24">收款商户：</text>
						<view class="fs28">
							<text>{{getConfig(711)}}</text>
							<m-copy class="ml-16" :str="getConfig(709)"></m-copy>
						</view>
					</view>
					<view class="flex-between ai-flex-start">
						<text class="fs24">收款码：</text>
						<view class="fs28 flex-column ta-center">
							<m-image2 :isPreview="true" :src="config712" size="200"></m-image2>
							<text class="fs21 mt-12">点击放大二维码</text>
						</view>
					</view>
				</m-block>
				<m-block class="payForm mt-48">
					<view class="flex ptb-12">
						<text class="fs28 fw-600">转账凭证填写</text>
					</view>
					<view class="mt-24 flex-between mb-48">
						<view class="fs26">转账银行卡号(选填)</view>
						<view class="flex-1 ta-right">
							<input class="fs26" type="text" v-model="form.bankcard" placeholder="请输入转账银行卡号">
						</view>
					</view>
					<!-- <view class="flex-between mtb-48">
						<view class="fs26">转账流水号</view>
						<view class="">
							<input class="fs26 ta-right" type="text" v-model="form.transferNo" placeholder="请输入银行流水号">
						</view>
					</view> -->
					<view class="flex-between">
						<view class="fs26">转账金额</view>
						<view class="flex-1 ta-right">
							<input class="fs26" type="text" v-model="form.amount" placeholder="请输入转账金额">
						</view>
					</view>
					<view class="mt-48">
						<uploadPhoto v-model="imgList" placeholder="请上传转账凭证" length=1 />
					</view>
				</m-block>
				<text style="color:red" class="fs21 mt-12">*请仔细核对信息后再操作</text>
				<m-block gap="30" bgColor="unset" @click="submit">
					<m-button>提交凭证</m-button>
				</m-block>
			</m-block>
		</uni-popup>
	</m-layout2>
</template>

<script>
	import { mapState } from 'vuex'
	import { First, CreatePayOrder } from '@/api/Order.js'
	import { gettime } from '@/api/Ctrls.js'
	import { balance } from '@/api/Users.js'
		import { tbvRegister,  } from "@/api/Trade.js"
	import md5 from 'js-md5'
	export default {
		data() {
			return {
				isOrder: false,
				payShow: false,
				payLoading: false,
				orderid: '',
				item: {},
				payType: '1', //默认支付宝支付
				payList: {
					1: '现金余额',
					3: '收益余额',
					// 12: '支付宝',
					// 22: '银行卡',
					// 23: '云闪付扫码',
					// 2: '微信支付',
					// 3: '杉德支付',
					// 31:'拉卡拉_支付宝',
					// 32:'拉卡拉_微信',
					// 33:'拉卡拉_云闪付',
					// 34: '聚合支付',
				},
				timestamp: -1, //倒计时
				form:{
					amount:'',  // 金额
					bankcard:'', //  银行名称
				},
				imgList: [], // 凭证
			};
		},
		onLoad({ orderid, isOrder }) {
			this.orderid = orderid;
			this.isOrder = isOrder || false;
		},
		onShow() {
			this.getData();
		},
		computed: {
			...mapState({
				userbalance: state => state.user.userbalance,
				enum: state => state.general.enum,
				config: state => state.general.config,
			}),
			// payList(){
			// 	return this.enum['PayType']
			// },
			//计算总价  
			totalPrice() {
				if (this.item.wards == 1 || this.item.wards == 3) return this.item.totalamount
				return this.item.totalamount + this.item.yf
			},
			config712() {
				return this.config[712]
			},
		},
		methods: {
			downpay() {
				this.$refs.payShow.open()
			},
			// 提交
			async submit() {
				console.log('this.imgList',this.imgList)
				if (!this.form.amount || !this.imgList.length) return this.Toast('请完善资料')
				const { success, msg, data, code } = await tbvRegister({
					...this.form,
					Transfervoucher: this.imgList[0],
					Orderid:this.item.id
				});
				this.Toast(msg);
				if (!success) return
				await this.sleep(500);
				this.Jump({url:`/pages/order/order`,mode:3});
			},
			async verify() {
				await balance();
				if (!this.payType) {
					return this.Toast('请选择支付方式')
				}
				// if (this.payType == 2) {
				// 	if (this.userbalance[1]['balance'] < this.totalPrice) {
				// 		return this.Toast('账户余额不足')
				// 	}
				// }
				if (this.payType == 1||this.payType == 3) {
					this.payShow = true;
				} else {
					//直接创建
					this.creat();
				}
			},
			//  创建 订单
			async creat(pwd = '') {
				try {
					//打开loading
					this.payLoading = true;
					let params = (this.payType == 1||this.payType == 3) ? {
						paypassword: md5(pwd),
						paytype: this.payType,
					} : {
						paytype: this.payType,
					};
					const { success, data, msg } = await CreatePayOrder(params, [this.orderid])
					if (success) {
						if (this.payType == 1 || this.payType == 3) { 
							this.Toast(msg)
							this.payLoading = false;
							// 余额支付
							await this.sleep(500)
							if (this.isOrder) {
								uni.$emit('updateData', 'order')
								this.Jump()
							} else {
								this.Jump({
									url: '/pages/order/order',
									mode: 3
								})
							}
						} else {
							this.payJump(data, this.payType)
						}
					} else {
						this.Toast(msg)
						this.payLoading = false;
					}
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}

			},
			//支付弹窗带入密码
			async propCreat(pwd) {
				console.log('000---')
				//关闭密码框
				this.payShow = false;
				this.creat(pwd);
			},
			// 倒计时
			timeOunt() {
				setTimeout(async () => {
					this.getData();
				}, 500)
			},
			async getData() {
				await balance();
				const { success, data } = await First({
					oid: this.orderid
				})
				this.item = data;
				try {
					if (success) {
						//如果不是待支付订单  直接跳转
						if (data.orderState > 0) {
							this.Jump({
								url: '/pages/order/details/details?orderid=' + this.orderid,
								mode: 2
							})
						} else {
							if (this.payLoading == true) {
								//当重新显示页面时   关闭支付弹窗 打开确认付款弹窗
								this.payLoading = false;
								this.payShow = false;
								this.$refs.copyShow.open()
							}
						}
						// const { data } = await gettime()
						// let endTime = Date.parse(data.timespan)
						// let startTime = Date.parse(data.timespan)
						// const timestamp = (endTime - startTime) / 1000
						// if (timestamp <= 0) return
						// this.timestamp = timestamp

					}
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
		},
	}
</script>

<style lang="scss">
	.surePay {
		::v-deep .top-nav {
			background: #fff !important;
		}

		.main {
			padding: 24rpx;
			background: #fff;
			border-radius: 0 0 20rpx 20rpx;
		}

		.top-msg {
			padding: 50rpx 0;
			text-align: center;

			.h1 {
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.h2 {
				padding: 20rpx 0;

				.m-price {
					::v-deep .left-unit {
						font-size: 36rpx !important;
					}
				}

				.debt-price {
					padding-bottom: 5rpx;

					text:nth-of-type(1) {
						padding: 0 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #fff;
					}

					text:nth-of-type(2) {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #fff;
					}
				}
			}

			.h3 {
				.box {
					display: inline-flex;
					align-items: center;
					padding: 5rpx 30rpx;
					background: #FFFFFF;
					border-radius: 10rpx;

					text {
						font-size: 24rpx !important;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FA2B47 !important;
						padding-right: 5rpx;
					}

					::v-deep .uni-countdown {

						display: inline-flex !important;
						justify-content: center;
						align-items: center;



						.uni-countdown__number {
							line-height: unset !important;
							width: unset !important;
							display: inline !important;
							font-size: 24rpx !important;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FA2B47 !important;
						}

						.uni-countdown__splitor {
							font-size: 28rpx !important;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FA2B47 !important;
						}
					}
				}
			}

		}

		.pay-type {
			padding-top: 50rpx;

			.titles {
				padding-bottom: 25rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.btn-box {
			.box {
				margin-top: 24rpx;
				padding: 24rpx;
				background: #fff;
			}
		}

		.pay-popop {
			::v-deep .title {
				margin-bottom: 0;
			}
		}

		.copy-popup {
			width: 582rpx;
			height: 264rpx;
			background: #ffffff;
			border-radius: 20rpx;

			.center {
				flex: 1;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.btn-box {
				border-top: 1rpx solid #eeeeee;

				text {
					display: inline-block;
					flex: 1;
					text-align: center;
					padding: 26rpx 0;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}

				text:nth-of-type(2) {
					border-left: 1rpx solid #eeeeee;
					color: #FF2323;
				}
			}
		}
	}
</style>